<template>
  <div>
    <div class="nav" style="display: block;">
    <HomeView></HomeView>
    </div>
    <div style="display: flex;">
      <el-calendar v-model="value" class="clock">
      </el-calendar>

      <el-card class="box-card" style="width: 150px;">
        <div>
          <p class="text item">顾客数量:{{ cnum }}</p>
          <p class="text item">车辆数量:{{ rnum }}</p>
          <p class="text item">订单数:{{ onum }}</p>
          <p class="text item">管理员数量:{{ admin }}</p>
        </div>
      </el-card>
      <div class="statistics">
        <div id="bing" style="width:100% ;height:300px;"></div>
      </div>

    </div>
</div>
</template>

<script>

import HomeView from './HomeView.vue';
import * as echarts from "echarts";


export default {
  name: 'home',
    components: { 
      HomeView,
    },
    // mounted: function() {
    //   this.$nextTick(function() {
    //     this.getPie()
    //   })
    // },
    methods:{
      getPie(one,two,three,four) {

        var myChart = echarts.init(document.getElementById('bing'))
 
        var option = {

          title: {
            text: '季度营业额占比',
            x: 'center' ,             
          },

          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            textStyle: {
              color: '#000',
              fontSize: 16
            },
            data: ['第一季度', '第二季度', '第三季度','第四季度']
          },
          color: ['#32dadd', '#b6a2de', '#5ab1ef','#D44444'],
          series: {
            type: 'pie',             
            radius: '70%',           
            center: ['50%', '50%'],               
            data: [                  
              { name: '第一季度', value: one},
              { name: '第二季度', value: two},
              { name: '第三季度', value: three},
              { name: '第四季度', value: four}
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,

                },
                labelLine: {
                  show: true
                }
              }
            },
          }

        }

        myChart.setOption(option)
      }

       
    },
    data() {
      return {
        date:'',
        value: new Date(),
        cnum:'',
        rnum:'',
        onum:'',
        admin:'',
        Data:[],
        one:0,
        two:0,
        three:0,
        four:0
      }
    },
    created(){
      this.$axios.post('/car/carList',{},{
        
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              
      })
            .then(response =>{
                    this.form1 = response.data.data;
                    this.rnum=this.form1.length
              })

              this.$axios.post('/role/roleList',{},{
                
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              
              }
              })
            .then(response =>{
                    this.form2 = response.data.data;
                    this.admin=this.form2.length

                })


              this.$axios.post('/customer/customerList',{},{
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              })
            .then(response =>{
                    this.form3 = response.data.data;

                    this.cnum=this.form3.length
                })
              // 订单数
              this.$axios.post('/orders/orderList',{},{
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              })
              .then(response =>{
                      this.form4 = response.data.data;
                      this.onum=this.form4.length
                      this.table = this.form4
                      for(let i =0;i<this.form4.length;i++){
                        this.table[i].date
                      }
                  })
                  // 获取年份

                  this.$axios.post('/orders/getMount',{},{
                    headers:{
                      "token":JSON.parse(localStorage.getItem('user')).token
                    } 
                    })
                    .then(res=>{
                      var month = res.data.data
                      for(let i=0;i<month.length;i++){
                        console.log(month[i].month)
                        if(month[i].month<4){
                          this.one = this.one+month[i].count
                        }
                        if(month[i].month<7){
                          this.two = this.two+month[i].count
                        }
                        if(month[i].month<10){
                          this.three = this.three+month[i].count
                        }
                        if(month[i].month<13){
                          this.four = this.four+month[i].count
                        }
                        
                      }
                      console.log(this.four)
                      this.getPie(this.one,this.two,this.three,this.four)
                    })
        }

}
</script>


<style>
.clock{
  width: 40%;
}
.text {
    font-size: 14px;
    height: 20px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100px;
    height: 320px;
    margin-left: 50px;
    margin-right: 50px;
  }
  .statistics{
    width: 45%;
  }
</style>